<template>
    <div>
      <ul class="form-list">
        <li>
          <label for="assignment-name">作业名称：</label>
          <input type="text" id="assignment-name" name="assignment-name" v-model="unitHomework.title" required>
          <p v-if="!unitHomework.title" style="color: #999;">
            作业名称不得为空
      </p>
        </li>
        <li>
          <label for="assignment-content">作业内容：</label>
          <textarea id="assignment-content" name="assignment-content" v-model="unitHomework.content" rows="10" required></textarea>
          <p v-if="!unitHomework.content" style="color: #999;">
            作业要求不得为空
      </p>
        </li>
        <li>
          <label for="start-date">开始时间：</label>
          <input type="datetime-local" id="start-date" name="start-date" 
            v-model="unitHomework.start_time" @change="validateDates" required
            :style="{ color: unitHomework.status === 0 ? 'red' : 'black' }">
        </li>
        <li>
          <label for="end-date">结束时间：</label>
          <input type="datetime-local" id="end-date" name="end-date" 
            v-model="unitHomework.end_time" @change="validateDates" required
            :style="{ color: unitHomework.status === 0 ? 'red' : 'black' }">
        </li>
        <p v-if="!isValid && unitHomework.start_time && unitHomework.end_time">
        结束时间必须晚于开始时间,且开始时间必须晚于当前时间。
      </p>
      </ul>
      <el-button type="primary" :disabled="!isValid" @click="submitForm">提交</el-button>
    </div>
  </template>

<script>
// import api from '.../api/axios';
// import { ElButton, ElInput, ElCollapse, ElCollapseItem, ElDialog, ElForm, ElFormItem, ElIcon } from 'element-plus';
// import api from '@/api/axios'; 
import { ElMessage } from 'element-plus';
import axios from 'axios';

export default {
    name: 'AddHmkDetail',
// components: {
//   ElButton,
//   ElInput,
//   ElCollapse,
//   ElCollapseItem,
//   ElDialog,
//   ElForm,
//   ElFormItem,
//   ElIcon
// },
data() {
  return {
    hmk_id:this.$route.params.hmkId,//应该换成具体的
    isValid: true,
    unitHomework: {
        unit_id:'',
        maxscore:100,
        title: '',
        content: '',
        start_time: '',
        end_time: '',
        Url:null,
        status:-1
      },
  };
},
methods: {
    validateDates() {
      const start = new Date(this.unitHomework.start_time);
      const end = new Date(this.unitHomework.end_time);
      this.isValid = start < end && start>new Date();
      console.log(this.isValid)
    },
    submitForm() {
        console.log("hhh")
      const { title, content, start_time, end_time } = this.unitHomework;
      const start = new Date(start_time);
      const end = new Date(end_time);
      if (title && content && start_time && end_time && start < end) {
        // 处理表单提交逻辑
        this.UpdateHmk();
        // ElMessage.success('表单已提交');
      } else {
        ElMessage.error('所有字段必须填写且结束时间必须晚于开始时间。');
        }
    },
    async fetchHmk(){
        await axios.get(`http://8.138.12.59:1999/teacher/homework/${this.hmk_id}`)
        .then(response=>{
            if(response.data.status==1)
            {this.unitHomework=response.data.data;
                this.validateDates();
            }
        else ElMessage.error("获取失败！")
        }).catch(err=>{
            console.log(err);
        })
    },
    async UpdateHmk(){
        const data={
            homework_id:this.hmk_id,
            content:this.unitHomework.content,
            title:this.unitHomework.title,
            start_time:this.unitHomework.start_time,
            end_time:this.unitHomework.end_time
        }
        await axios.put(`http://8.138.12.59:1999/teacher/homework`,data)
        .then(response=>{
            if(response.data.status==1)
            {ElMessage.success("修改成功！")}
        else ElMessage.error("获取失败！")
        }).catch(err=>{
            console.log(err);
        })
    },
  },
  created(){
    this.fetchHmk();
  }
}
</script>
<style scoped>
.all{
    margin: auto;
}
.form-list {
  /* display: flex;
  flex-wrap: wrap; */
  list-style-type: none;
  padding: 0;
}
.form-list li {
  margin-bottom: 15px;
  flex: 0 0 calc(50% - 10px); /* 计算每个列表项的宽度，50% 减去一定的间隔 */
  max-width: calc(80% - 10px);/* 设置每个列表项的最大宽度 */
  box-sizing: border-box;
  padding-right: 10px; /* 右侧间隔 */
  flex-wrap: wrap; 
}

.form-list label {
  display: block;
  margin: 5px;
  color: #484848;
}

.form-list input[type="text"],
.form-list textarea,
.form-list input[type="datetime-local"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
  color: #6c6c6c;
}

.form-list textarea {
  resize: vertical;
}
</style>